<html>

<head>
    <title>
        Table
    </title>
    <style>
        .collapse {
            caption-side: bottom;
            border-collapse: collapse;
        }

        .separate {
            caption-side: top;
            border-collapse: separate;
        }

        .separate.spacing {
            caption-side: bottom;
            border-spacing: 0.5em;
            table-layout: fixed;
        }

        table {
            display: inline-table;
            margin: 1em;
            border: dashed 6px;
            border-width: 6px;
        }

        table th,
        table td {
            border: solid 3px;
        }

        .fx {
            border-color: orange blue;
        }

        .gk {
            border-color: black red;
        }

        .ie {
            border-color: blue gold;
        }

        .tr {
            border-color: aqua;
        }

        .sa {
            border-color: silver blue;
        }

        .wk {
            border-color: gold blue;
        }

        .ch {
            border-color: red yellow green blue;
        }

        .bk {
            border-color: navy blue teal aqua;
        }

        .op {
            border-color: red;
        }
    </style>
</head>

<body>
    <table class="separate">
        <caption><code>border-collapse: separate</code></caption>
        <tbody>
            <tr>
                <th>Browser</th>
                <th>Layout Engine</th>
            </tr>
            <tr>
                <td class="fx">Firefox</td>
                <td class="gk">Gecko</td>
            </tr>
            <tr>
                <td class="ed">Edge</td>
                <td class="tr">EdgeHTML</td>
            </tr>
            <tr>
                <td class="sa">Safari</td>
                <td class="wk">Webkit</td>
            </tr>
            <tr>
                <td class="ch">Chrome</td>
                <td class="bk">Blink</td>
            </tr>
            <tr>
                <td class="op">Opera</td>
                <td class="bk">Blink</td>
            </tr>
        </tbody>
    </table>
    <table class="collapse">
        <caption><code>border-collapse: collapse</code></caption>
        <tbody>
            <tr>
                <th>Browser</th>
                <th>Layout Engine</th>
            </tr>
            <tr>
                <td class="fx">Firefox</td>
                <td class="gk">Gecko</td>
            </tr>
            <tr>
                <td class="ed">Edge</td>
                <td class="tr">EdgeHTML</td>
            </tr>
            <tr>
                <td class="sa">Safari</td>
                <td class="wk">Webkit</td>
            </tr>
            <tr>
                <td class="ch">Chrome</td>
                <td class="bk">Blink</td>
            </tr>
            <tr>
                <td class="op">Opera</td>
                <td class="bk">Blink</td>
            </tr>
        </tbody>
    </table>
    <table class="separate spacing">
        <caption>
            <code>
                border-collapse: separate
            </code>
        </caption>
        <tbody>
            <tr>
                <th>Browser</th>
                <th>Layout Engine</th>
            </tr>
            <tr>
                <td class="fx">Firefox</td>
                <td class="gk">Gecko I Am Very Long</td>
            </tr>
            <tr>
                <td class="ed">Edge</td>
                <td class="tr">EdgeHTML Longer Longer Longer</td>
            </tr>
            <tr>
                <td class="sa">Safari</td>
                <td class="wk">Webkit</td>
            </tr>
            <tr>
                <td class="ch">Chrome</td>
                <td class="bk">Blink</td>
            </tr>
            <tr>
                <td class="op">Opera</td>
                <td class="bk">Blink</td>
            </tr>
        </tbody>
    </table>
</body>

</html>